<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index</title>
 
<!-- Required Stylesheets -->
<link href="<%=request.getContextPath()%>/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/icheck/blue.css">

<!-- Required Javascript -->
<script src="<%=request.getContextPath()%>/js/jquery-3.1.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap/bootstrap-treeview.min.js"></script>
 <style>
      /* #tree{
          width:300px;
       } */
       
       
       #tree{
          width:294px;
		  overflow: hidden;
       }
       .list-group{
			overflow-y:scroll; 
			overflow-x:hidden;
			width: 310px;
			height: 100%;
	   }
		/*  1.外层元素必须设置overflow:hidden

			2.内层元素必须设置overflow-y:scroll
			
			3.内层的width必须大于外层的width,且正好可以把滚动条给遮住
			
			4.内层height:100%,才能滚动起来 */
    </style>
  </head>
  
  <body>
    <div id="tree"></div>
    <script type="text/javascript">
   $(function(){
    	$.ajax({
    		url:"<%=request.getContextPath()%>/category/category_getCategoryTree?id=1",
    		dataType:"text",
    		success:function(data){
    			var tree = '['+data+']';
    			$('#tree').treeview({data: tree});//,enableLinks:true
    			$('#tree').treeview('expandAll', { levels: 4, silent: true });
    			$('#tree').on('nodeSelected', function(event, node) {
    				//tag数组第一位是id，第二位是level
    				if(node.tags[1]==4){
	    				parent.main.location.href="<%=request.getContextPath()%>/brandShow/BrandShow_findBrandsByCategory?categoryId="+node.tags[0]+"&categoryName="+node.text;
    				}
    			});
    		}
    	});
    });
   

    </script>
   
</div>
  
  </body>
  
</html>
